<div class="main-container">
    <div class="content-top-bar">
        <nz-form-item nzFlex>
            <nz-form-label>管理范围</nz-form-label>
            <nz-form-control>
                <nz-select [(ngModel)]="defaultMngId"
                           [nzAllowClear]="false"
                           nzPlaceHolder="管理范围"
                           style="width: 200px;"
                           (ngModelChange)="mngOnChanged($event)">
                    <nz-option *ngFor="let item of mngList"
                               [nzValue]="item.id"
                               [nzLabel]="item.name">

                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>
    </div>

    <div class="main-content" *ngIf="defaultMngId === 1">
        <div class="row top-row">
            <div class="card">
                <div class="card-title">
                    引水统计
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt1" class="chart"
                     style="height: 200px;"></div>
            </div>
            <div class="card">
                <div class="card-title">
                    作物种植面积
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt2" class="chart"
                     style="height: 200px;"></div>
            </div>
            <div class="card">
                <div class="card-title">
                    各业用水指标
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt3" class="chart"
                     style="height: 200px;"></div>
            </div>
            <div class="card">
                <div class="card-title">
                    取水口取水指标
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt4" class="chart"
                     style="height: 200px;"></div>
            </div>
        </div>
        <div class="row center-row">
            <div class="card">
                <nz-card nzTitle="计划供水趋势（各业用水）"
                         class="custom-card">
                    <div echarts [options]="baseBarChartOption" [merge]="barChartOpt1"
                         style="height: 350px;"></div>
                </nz-card>
            </div>
            <div class="card">
                <nz-card nzTitle="计划供水趋势（取水口取水）"
                         class="custom-card">
                    <div echarts [options]="baseBarChartOption" [merge]="barChartOpt2"
                         style="height: 350px;"></div>
                </nz-card>
            </div>
        </div>
        <div class="row">
            <div class="card">
                <nz-card nzTitle="计划数据"
                         class="custom-card">
                    <nz-table
                        #dataTable
                        [nzData]="tableData"
                        nzBordered
                        [nzHideOnSinglePage]="true"
                        nzSize="middle">
                        <thead>
                        <tr>
                            <th rowspan="2">名称</th>
                            <th colspan="3" *ngFor="let item of tableHead">{{item.title}}</th>
                        </tr>
                        <tr>
                            <ng-container *ngFor="let item of tableHead">
                                <th>引水</th>
                                <th>计划</th>
                                <th>完成度</th>
                            </ng-container>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of dataTable.data">
                            <td>{{ row.name }}</td>
                            <ng-container *ngFor="let name of tableHead">
                                <td>{{ row[name.inletProp] }}</td>
                                <td>{{ row[name.planProp] }}</td>
                                <td>{{ row[name.compProp] }}</td>
                            </ng-container>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
        </div>
    </div>

    <div class="main-content" *ngIf="defaultMngId !== 1">
        <div class="row top-row">
            <div class="card">
                <div class="card-title">
                    农业用水
                </div>
                <div class="progress">
                    <div class="progress-box">
                        <div class="progress-container">
                            <nz-progress [nzPercent]="percentage1"
                                         nzType="circle"
                                         [nzWidth]="180"
                                         [nzStrokeWidth]="4"
                                         [nzStrokeColor]="{'0%': '#b6e49d', '100%': '#0094f0'}"
                                         [nzFormat]="formatPercentage"></nz-progress>
                            <div class="text-wrap">
                                <p class="title">已引水量</p>
                                <p class="data">{{completion1}}亿方</p>
                                <p class="data">{{percentage1}}%</p>
                            </div>
                        </div>

                    </div>
                    <div class="info-box">
                        <div class="info-content">
                            <p class="num">
                                <i class="num-icon"></i>
                                <span>计划水量</span>
                                {{planNum1}}亿方
                            </p>

                        </div>
                        <div class="info-content">
                            <p class="num">
                                <i class="total-icon"></i>
                                <span>已引水量</span>
                                {{completion1}}亿方
                            </p>
                        </div>
                        <div class="info-content">
                            <p class="num">
                                <i class="percentage-icon"></i>
                                <span>计划占比</span>
                                {{percentage1}}%
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            <div class="card" *ngIf="isEcoShow">
                <div class="card-title">
                    生态用水
                </div>
                <div class="progress">
                    <div class="progress-box">
                        <div class="progress-container">
                            <nz-progress [nzPercent]="percentage2"
                                         nzType="circle"
                                         [nzWidth]="180"
                                         [nzStrokeWidth]="4"
                                         [nzStrokeColor]="{'0%': '#b6e49d', '100%': '#0094f0'}"
                                         [nzFormat]="formatPercentage"></nz-progress>
                            <div class="text-wrap">
                                <p class="title">已引水量</p>
                                <p class="data">{{completion2}}亿方</p>
                                <p class="data">{{percentage2}}%</p>
                            </div>
                        </div>

                    </div>
                    <div class="info-box">
                        <div class="info-content">
                            <p class="num">
                                <i class="num-icon"></i>
                                <span>计划水量</span>
                                {{planNum2}}亿方
                            </p>
                        </div>
                        <div class="info-content">
                            <p class="num">
                                <i class="total-icon"></i>
                                <span>已引水量</span>
                                {{completion2}}亿方
                            </p>
                        </div>
                        <div class="info-content">
                            <p class="num">
                                <i class="percentage-icon"></i>
                                <span>计划占比</span>
                                {{percentage2}}%
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card">
                <div class="card-title">
                    灌溉面积
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt3" class="chart"
                     style="height: 200px;"></div>
            </div>
            <div class="card">
                <div class="card-title">
                    种植结构
                </div>
                <div echarts [options]="basePieChartOption" [merge]="pieChartOpt4" class="chart"
                     style="height: 200px;"></div>
            </div>
        </div>
        <div class="row center-row">
            <div class="card">
                <nz-card nzTitle="市县用水"
                         class="custom-card">
                    <nz-radio-group *ngIf="isGhShow" [nzButtonStyle]="'solid'" [(ngModel)]="ghValue" (ngModelChange)="ghOnChange()"
                                    style="margin-left: 5px">
                        <label nz-radio-button *ngFor="let item of ghList" [nzValue]="item.value">{{item.label}}</label>
                    </nz-radio-group>
                    <div echarts [options]="baseBarChartOption" [merge]="barChartOpt3"
                         style="height: 350px;"></div>
                </nz-card>
            </div>
            <div class="card">
                <nz-card nzTitle="水位流量历时曲线"
                         class="custom-card">
                    <nz-radio-group [nzButtonStyle]="'solid'" [(ngModel)]="countyId" (ngModelChange)="countyOnChange()"
                                    style="margin-left: 5px">
                        <label nz-radio-button *ngFor="let item of countyList" [nzValue]="item.id">{{item.name}}</label>
                    </nz-radio-group>
                    <div echarts [options]="lineBaseOpt" [merge]="lineChartOpt"
                         style="height: 350px;"></div>
                </nz-card>
            </div>
        </div>
        <div class="row">
            <div class="card">
                <nz-card nzTitle=""
                         class="custom-card">
                    <nz-radio-group *ngIf="isGhShow" [nzButtonStyle]="'solid'" [(ngModel)]="ghValue" (ngModelChange)="ghOnChange()"
                                    style="margin-left: 5px;margin-bottom: 10px">
                        <label nz-radio-button *ngFor="let item of ghList" [nzValue]="item.value">{{item.label}}</label>
                    </nz-radio-group>
                    <nz-table
                        #dataTable
                        [nzData]="tableData2"
                        nzBordered
                        [nzHideOnSinglePage]="true"
                        nzSize="middle">
                        <thead>
                        <tr>
                            <th rowspan="2">市县</th>
                            <th *ngFor="let item of tableHead2">{{item.title}}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let row of dataTable.data">
                            <td>{{ row.name }}</td>
                            <ng-container *ngFor="let name of tableHead2">
                                <td>{{ row[name.valProp] }}</td>
                            </ng-container>
                        </tr>
                        </tbody>
                    </nz-table>
                </nz-card>
            </div>
        </div>
    </div>
</div>
